<!DOCTYPE html>
<html>
<@h.head />
<body class="homepage">
	<@h.nav />
	<div class="h30"></div>
	<section>
		<div class="container">
		<div class="content">
			<div id="listDeail" class="area">
				<#if (list)??>
					<#list list as record>
						<a href="javascript:void(0);" reqid="${(record.value)!}" <#if (record_index==0)>class="act"</#if> >${(record.label)!}</a>
					</#list>
				</#if>
			</div>
			<div class="tab-wrap"></div>
			<div id="regions" class="area">
				<#if (areaList)??>
					<#list areaList as record>
						<a href="javascript:loadRetails(${(record.id)!})" id="a${(record.id)!}" <#if (record_index==0)>class="act"</#if> >${(record.name)!}</a>
					</#list>
				</#if>
			</div>
		</div>
		<div class="gmap-area">
			<div class="row">
				<div class="map-content">
					<ul id="retails">
						<#if (retailList)??>
							<#list retailList as record>
								<li class="col-sm-6">
									<address>
										<h5><a href="${path}/retail/retailItem/${(record.id)!}">${(record.name)!}</a></h5>
										<p>${(record.address)!}</p>
										<p>电话：<b>${(record.telephone)!}</b></p>
									</address>
								</li>
							</#list>
						</#if>
					</ul>
				</div>
			</div>
		</div>
		</div>
		</div>
	</section>
	<@h.foot />
	
	<script type="text/javascript">
		$(function() {
			$("#listDeail a").click(function(){
				if($(this).hasClass("act")){
					return false;
				}
				$this = $(this);
				$.get("${path}/retail/getArea/" + $(this).attr("reqid"), function(data) {
					$("#regions").empty();
					$("#retails").empty();
					$.each(data,function(i, element) {
						$("#regions").append("<a href='javascript:loadRetails(" + element.id + ")' id='a" + element.id + "'>" + element.name + "</a>");
						if (i === 0) {
							loadRetails(element.id);
						}
					});
					$("#listDeail .act").removeClass("act");
					$this.addClass("act");
					$(window).resize();
				});
			});
		});
		function loadRetails(id) {
			if($("#a" + id).hasClass("act")){
				return false;
			}
			$("#retails").empty();
			$.get("${path}/retail/getRetail/" + id, function(data) {
				$.each(data,function(i, element) {
					$("#retails").append("<li class='col-sm-6'>"
										+ "	<address>"
										+ "	<h5><a href='${path}/retail/retailItem/" + element.id + "'>" + element.name + "</a></h5>"
										+ "	<p>" + element.address + "</p>"
										+ "	<p>电话：<b>" + element.telephone + "</b></p>"
										+ " </address></li>");
				});
				$("#regions .act").removeClass("act");
				$("#a" + id).addClass("act");
				$(window).resize();
			});
		};
	</script>
</body>
</html>